<template>
  <div class="enterprise-archive">
    <!-- 查询功能区 -->
    <div class="query-section">
      <input v-model="searchQuery" placeholder="请输入企业名称" />
      <select v-model="selectedContractStatus">
        <option value="">合同状态</option>
        <option value="signed">已签署</option>
        <option value="pending">待审批</option>
        <option value="expired">到期提醒</option>
      </select>
      <select v-model="selectedEnterpriseType">
        <option value="">企业类型</option>
        <option value="manufacturing">制造</option>
        <option value="logistics">物流</option>
        <option value="research">研发</option>
      </select>
      <button @click="search">搜索</button>
    </div>

    <!-- 企业档案列表展示 -->
    <div class="enterprise-list">
      <div class="query-section">
        <table>
          <thead>
            <tr>
              <th @click="sort('name')">企业名称</th>
              <th>法定代表人</th>
              <th>注册资本</th>
              <th>企业类型</th>
              <th>合同状态</th>
              <th>租赁面积</th>
              <th>租赁情况</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="enterprise in filteredEnterprises" :key="enterprise.id">
              <td>{{ enterprise.name }}</td>
              <td>{{ enterprise.legalRepresentative }}</td>
              <td>{{ enterprise.registeredCapital }}</td>
              <td>{{ enterprise.type }}</td>
              <td>{{ getContractStatusText(enterprise.contractStatus) }}</td>
              <td>{{ enterprise.rentalArea }}</td>
              <td>{{ enterprise.rentalStatus }}</td>
              <td>
                <button @click="viewDetails(enterprise)">查看</button>
                <button @click="exportFile(enterprise)">导出</button>
                <button @click="generateBill(enterprise)">生成账单</button>
                <button @click="payBill(enterprise)">支付账单</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import jsPDF from 'jspdf'
import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'

export default {
  data() {
    return {
      searchQuery: '',
      selectedContractStatus: '',
      selectedEnterpriseType: '',
      enterprises: [
        {
          id: 1,
          name: '企业A',
          legalRepresentative: '张三',
          registeredCapital: '100万',
          type: '制造',
          contractStatus: 'signed', // 合同状态
          rentalArea: '200m²',
          rentalStatus: '已占用',
          unpaidAmount: 5000 // 欠费金额
        },
        {
          id: 2,
          name: '企业B',
          legalRepresentative: '李四',
          registeredCapital: '200万',
          type: '物流',
          contractStatus: 'pending',
          rentalArea: '150m²',
          rentalStatus: '空闲',
          unpaidAmount: 0 // 无欠费
        }
        // 更多企业数据...
      ]
    }
  },
  computed: {
    filteredEnterprises() {
      return this.enterprises.filter((enterprise) => {
        return (
          (!this.searchQuery || enterprise.name.includes(this.searchQuery)) &&
          (!this.selectedContractStatus ||
            enterprise.contractStatus === this.selectedContractStatus) &&
          (!this.selectedEnterpriseType ||
            enterprise.type === this.selectedEnterpriseType)
        )
      })
    }
  },
  methods: {
    search() {
      // 查询时会自动触发计算属性，过滤数据
    },
    sort(field) {
      this.enterprises.sort((a, b) => {
        if (a[field] < b[field]) return -1
        if (a[field] > b[field]) return 1
        return 0
      })
    },
    viewDetails(enterprise) {
      alert(`查看企业: ${enterprise.name}`)
    },
    exportFile(enterprise) {
      const doc = new jsPDF()
      doc.text(`企业名称: ${enterprise.name}`, 10, 10)
      doc.text(`法定代表人: ${enterprise.legalRepresentative}`, 10, 20)
      doc.text(`注册资本: ${enterprise.registeredCapital}`, 10, 30)
      doc.text(
        `合同状态: ${this.getContractStatusText(enterprise.contractStatus)}`,
        10,
        40
      )
      doc.text(`租赁面积: ${enterprise.rentalArea}`, 10, 50)
      doc.text(`租赁情况: ${enterprise.rentalStatus}`, 10, 60)

      // 导出 PDF 文件
      doc.save(`${enterprise.name}_档案.pdf`)

      // 导出 Excel 文件
      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.json_to_sheet([enterprise])
      XLSX.utils.book_append_sheet(wb, ws, '企业档案')
      XLSX.writeFile(wb, `${enterprise.name}_档案.xlsx`)
    },
    getContractStatusText(status) {
      const statusMap = {
        signed: '已签署',
        pending: '待审批',
        expired: '到期提醒'
      }
      return statusMap[status] || status
    },
    // 生成账单
    generateBill(enterprise) {
      alert(
        `为 ${enterprise.name} 生成账单。欠费金额: ${enterprise.unpaidAmount}元`
      )
      // 实际开发中可以在这里生成账单，例如调用后台接口来生成账单
    },
    // 支付账单
    payBill(enterprise) {
      if (enterprise.unpaidAmount > 0) {
        alert(`支付 ${enterprise.unpaidAmount} 元账单`)
        // 支付逻辑
      } else {
        alert('无欠费，无法支付')
      }
    },
    // 生成财务报表
    generateFinancialReport() {
      alert('查看财务报表')
      // 这里可以添加生成财务报表的逻辑，可能是展示一个表格或导出财务数据
    }
  }
}
</script>

<style scoped>
.query-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.enterprise-archive {
  padding: 20px;
}

.query-section {
  display: flex;
  gap: 10px;
}

.enterprise-list table {
  width: 100%;
  border-collapse: collapse;
}

.enterprise-list th,
.enterprise-list td {
  border: 1px solid #ddd;
  padding: 10px;
}

button {
  margin: 5px;
}

.financial-report {
  margin-top: 20px;
}
</style>
